<template>
	<view class="tabs-main">
		<template v-if="tabs.length">
			<view class="item" v-for="(item,index) in tabs" :key="index" @click="handleClick(index)"
				:style="{width:1/tabs.length*100+'%'}">
				<view :class="tabCurrent===index?'current':''" class="item-text">
					{{ item }}
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		props: {
			tabData: {
				type: Array,
				default: function() {
					return []
				}
			},
			tabCurrent: 0
		},
		computed: {
			tabs() {
				return this.tabData
			}
		},
		methods: {
			handleClick(index) {
				this.$emit('handleClick', index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabs-main {
		width: 100%;
		display: flex;
		flex-direction: row;
		position: fixed;
		left: 0;
		z-index: 10;
		background-color: #fff;
	}

	.item {
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: large;
		font-weight: bold;

		.item-text {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 0 10rpx;
		}

		.current {
			border-bottom: 2px solid $uni-color-primary;
		}
	}

</style>